<template>
	<view class="container">
		<!-- 顶部 -->
		<view class="header-box">
			<view :style="{ height: height + 'px' }">
				<view style="font-size: 36rpx;padding-left: 20rpx;"
					:style="{lineHeight: (height-menuHeight)+'px','paddingTop':menuHeight+'px'}">大麦植发
					<text style="font-size: 28rpx;margin-left: 10rpx;">{{mapData.ad_info.city}}</text>
				</view>
			</view>
			<view class="search-box">
				<view class="search-dm">
					<view class="input-box" @click="openMList">
						<view class="icon-search">
							<u-icon name="search" color="#999" size="20"></u-icon>
						</view>
						病症搜索
					</view>
				</view>
			</view>
			<u-popup :show="show" @close="closeMList" @open="openMList" mode="bottom" :round="20">
				<view>
					<MList @MListShow="MListShow"></MList>
				</view>
			</u-popup>
			<view class="uni-margin-wrap">
				<swiper class="swiper" style="height: 41vw;" circular :indicator-dots="false" :autoplay="true">
					<swiper-item v-for="url in swiperList" :key="url.imageUrl">
						<img style="width: 100%; height: 100%; border-radius: 16rpx" :src="url.imageUrl" alt=""
							srcset="" />
					</swiper-item>
				</swiper>
			</view>
			<!-- 互联网医院，预约挂号，商城甄选 三大模块 -->
			<view class="module-box">
				<!-- 	<view class="main-box">
					<button open-type="contact">客服</button>
				</view> -->
				<view class="main-box" @click="internetHospitalClick">
					<div class="module-icon-k">
						<img :src="baseURL + '/static/home/Frame 4434@2x.png'" shape="circle" />
					</div>
					<view>
						<view class="h2-box">互联网医院</view>
						<view class="p-box">免费问诊</view>
					</view>
				</view>
				<view class="main-box" @click="MakeAnAppointmentClick">
					<div class="module-icon-k">
						<img :src="baseURL + '/static/home/Frame 4435@2x.png'" shape="circle" />
					</div>
					<view>
						<view class="h2-box">预约挂号</view>
						<view class="p-box">免费预约</view>
					</view>
				</view>
				<view class="main-box" @click="spaceClick">
					<div class="module-icon-k">
						<img :src="baseURL + '/static/home/Frame@2x(3).png'" shape="circle" />
					</div>
					<view>
						<view class="h2-box">大麦空间</view>
						<view class="p-box">自由交流</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他快捷入口 -->
		<view class="quick-access">
			<view class="module-box" @click="informationRegistrationClick">
				<view class="img-box">
					<img :src="baseURL + '/static/home/Frame@2x.png'" shape="circle" />
				</view>
				<view class="title">信息登记</view>
			</view>
			<view class="module-box" @click="commentOnick">
				<view class="img-box">
					<img :src="baseURL + '/static/home/Frame@2x(1).png'" shape="circle" />
				</view>
				<view class="title">发友点评</view>
			</view>
			<view class="module-box" style="position: relative">
				<view class="img-box"><img :src="baseURL + '/static/center/yqhy-icon.png'" alt="" /></view>
				<view class="title">邀请好友</view>
				<button :hairline="false" :style="{
			  border: 'none',
			  padding: '0 !important',
			  width: '100%',
			  height: '100%',
			  opacity: '0',
			  position: 'absolute',
			}" open-type="share" text="邀请好友"></button>
			</view>
			<!-- <view class="module-box" @click="spaceClick">
				<view class="img-box">
					<img :src="baseURL + '/static/home/Frame@2x(3).png'" shape="circle" />
				</view>
				<view class="title">我的空间</view>
			</view> -->
			<view class="module-box" @click="aboutClick">
				<view class="img-box">
					<img :src="baseURL + '/static/home/Frame@2x(2).png'" shape="circle" />
				</view>
				<view class="title">关于大麦</view>
			</view>
		</view>
		<view class="line-10"></view>
		<view class="section-box">
			<!-- 精选医生 -->
			<view class="selected-doctor">
				<view class="header-title">
					<view class="left-box">精选医生</view>
					<view class="right-box" @click="PhysicianManagementClick">更多 <u-icon name="arrow-right" color="#999"
							size="12"></u-icon></view>
				</view>
				<PhysicianManagement />
				<!--   <view class="administrative-office">
          <div>
            <div class="tag-type">脱发科</div>
          </div>
          <div>
            <div class="tag-type">毛发科</div>
          </div>
          <div>
            <div class="tag-type">美学科</div>
          </div>
        </view>
        <view class="content-list">
          <view class="view-content" v-for="i in 2" :key="i">
            <view class="img-box">
              <img
                src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
                alt=""
              />
            </view>
            <view class="info-box">
              <view class="title-box">
                <text>王小平</text>
                <text>院长</text>
              </view>
              <view class="bottom-box">
                <view>好评<text style="color: #fe8c22">90%</text></view>
                <view>接诊患者 <text style="color: #fe8c22">123人</text></view>
              </view>
            </view>
          </view>
        </view>
     -->
			</view>
			<view class="line-10" style="margin-top: 20rpx;"></view>
			<!-- 毛发社区 -->
			<view class="hair-community">
				<view class="header-title">
					<view class="left-box">毛发社区</view>
					<view class="right-box" @click="hairCommunityMethod">更多 <u-icon name="arrow-right" color="#999"
							size="12"></u-icon></view>
				</view>
				<HairCommunity />
				<!-- 	<view class="administrative-office">
					<div>
						<div class="tag-type">脱发科</div>
					</div>
					<div>
						<div class="tag-type">毛发科</div>
					</div>
					<div>
						<div class="tag-type">美学科</div>
					</div>
				</view>
				<view class="hair-content-box" v-for="i in 2" :key="i">
					<view class="title-box">
						<view class="left-title">
							<view>如何治疗脱发？</view>
							<view><text>12个内容</text><text>5.2万人关注</text></view>
						</view>
						<view class="right-title"></view>
					</view>
					<view class="main-title">
						<view class="left-content">
							<view>何首乌治疗脱发是真的吗？</view>
							<view>何首乌为一种中药材，其作用有：补益精血养血滋阴、解毒、揭盲、润肠通便等，并不能直接生发。</view>
						</view>
						<view class="img-box">
							<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="" />
						</view>
					</view>
				</view>
		 -->
			</view>
			<!-- 商城甄选 -->
			<!-- <view class="mall-selection">
				<view class="header-title">
					<view class="left-box">商城甄选</view>
					<view class="right-box">更多 <u-icon name="arrow-right" color="#999" size="12"></u-icon></view>
				</view>

				<view class="content-list">
					<view class="view-content">
						<view class="img-box">
							<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="" />
						</view>
						<view class="info-box">
							<view class="title-box">
								<text>修复洗发霜头皮修复洗发水</text>
							</view>
							<view class="bottom-box">
								<text>￥ 300</text>
							</view>
						</view>
					</view>
					<view class="view-content">
						<view class="img-box">
							<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="" />
						</view>
						<view class="info-box">
							<view class="title-box">
								<text>修复洗发霜头皮修复洗发水修复洗发霜头皮修复洗发水</text>
							</view>
							<view class="bottom-box">
								<text>￥ 300</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	import {
		list,
		jsonToRSA,
		jscode2session
	} from "@/api/axios/Home.js";
	import MList from "./MList/index.vue";
	import PhysicianManagement from './components/PhysicianManagement/index.vue'
	import HairCommunity from './components/HairCommunity/index.vue'
	import store from '@/store/index.js'
	export default {
		props: {
			mapData: {
				type: Object,
				require: true,
			},
			height: {
				type: Number,
				require: true,
			},
			menuHeight: {
				type: Number,
			}
		},
		components: {
			MList,
			HairCommunity,
			PhysicianManagement
		},
		data() {
			return {
				value: "",
				show: false,
				baseURL: this.staticURL,
				swiperList: [],
				city: '北京1'
			};
		},
		methods: {

			aboutClick() {
				uni.navigateTo({
					url: "/pages/About/index",
				});
			},
			internetHospitalClick() {
				uni.navigateTo({
					url: "/pages/InternetHospital/index",
				});
			},
			hairCommunityMethod() {
				console.log(this.$parent.active = 3);
			},
			MListShow(show) {
				this.show = show;
			},
			closeMList() {
				this.show = false;
			},
			openMList() {
				this.show = true;
			},
			spaceClick() {
				uni.navigateTo({
					url: "/pages-space/Home/index",
				});
			},
			informationRegistrationClick() {
				uni.navigateTo({
					url: "/pages-center/InformationRegistration/index",
				});
			},
			searchChange() {},
			MakeAnAppointmentClick() {
				uni.navigateTo({
					url: "/pages-makeAnAppointmentCenter/MList/index",
				});
			},
			PhysicianManagementClick() {
				uni.navigateTo({
					url: "/pages/PhysicianManagement/index",
				});
			},
			shopClick() {
				uni.navigateTo({
					url: "/pages-shop/ShopList/index",
				});
			},
			addressMethod() {
				uni.navigateTo({
					url: "/pages/Address/index",
				});
			},
			commentOnick() {
				uni.navigateTo({
					url: "/pages/CommentOn/index",
				});
			},
		},
		created() {
			let code = uni.getStorageSync('code')
			let openId = uni.getStorageSync('openId')
			let avatarUrl = uni.getStorageSync('avatarUrl')
			let wePhone = uni.getStorageSync('wePhone')
			let nickName = uni.getStorageSync('nickName')

			jsonToRSA({
				params: {
					json: {
						appId: 'wx363402ec173d7c4f',
						openId: openId,
						unionId: "",
						phone: wePhone,
						nickName: nickName,
						avatarUrl: avatarUrl,
					}
				}
			}).then(res => {
				uni.setStorageSync('privateJson', res.privateJson)
				uni.setStorageSync('publicKey', res.publicKey)
			})
		},
		mounted() {
			let _this = this;

			list({
				params: {
					status: 0,
				},
			}).then((res) => {
				if (res.length > 0) {
					_this.swiperList = res;
				} else {
					_this.swiperList = [{
						imageUrl: this.baseURL + '/static/home-banner.png'
					}]
				}

			});
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>